// 文件名必须叫gulpfile.js，这个文件用来制定各种gulp任务

const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      cleanCss = require('gulp-clean-css'),
      babel = require('gulp-babel'),
      uglify = require('gulp-uglify'),
      del = require('del'),
      connect = require('gulp-connect'),
      sass = require('gulp-sass')


// 统一管理各种路径
const paths = {
  html: {
    src: 'src/**/*.html',
    dest: 'dist'
  },
  css: {
    src: 'src/css/**/*.scss',
    dest: 'dist/css'
  },
  js: {
    src: 'src/js/**/*.js',
    dest: 'dist/js'
  },
  img: {
    src: 'src/images/**',
    dest: 'dist/images'
  },
  libs: {
    src: 'src/libs/**',
    dest: 'dist/libs'
  }
}


// 1.制定gulp任务在gulp3用task方法
// gulp.task('html', () => {})
// 2.gulp4制定任务直接写函数
// const html = () => {}

// 删除dist任务：每次再gulp之前把老的dist目录删掉
const delDist = () => del('dist')


// 制定一个html任务： 把html文件从src里取出来，压缩html代码，再放入dist目录
// gulp.src() 取文件，**代表任意层级的任意目录，*代表所有文件
// pipe：管道，数据流在管道里做处理
// gulp.dest() destination 目标，把处理完成之后的文件通过管道放入目标文件夹
const html = () => {
  return gulp.src(paths.html.src)
    .pipe(htmlmin({
      removeComments: true, // 清除HTML注释
      collapseWhitespace: true, // 压缩HTML
      collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
      removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
      removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
      removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
      minifyJS: true, // 压缩页面JS
      minifyCSS: true // 压缩页面CSS 
    }))
    .pipe(gulp.dest(paths.html.dest))
    .pipe(connect.reload())
}

// 制定css任务：先将sass编译成css，再压缩css
const css = () => {
  return gulp.src(paths.css.src)
    .pipe(sass())
    .pipe(cleanCss())
    .pipe(gulp.dest(paths.css.dest))
    .pipe(connect.reload())
}

// 制定js任务：先ES6转ES5，再压缩
const js = () => {
  return gulp.src(paths.js.src)
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest(paths.js.dest))
    .pipe(connect.reload())
}

// 制定img任务：文件移动
const img = () => gulp.src(paths.img.src).pipe(gulp.dest(paths.img.dest))

// 制定libs任务：文件移动
const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))

// 制定server任务：创建服务器
const server = () => {
  return connect.server({
    root: 'dist',
    port: 1314,
    livereload: true // 支持热更新
  })
}

// 制定watch任务：监听文件的修改，只要文件被改了就自动重启相应的任务
const watch = () => {
  // gulp.watch()监听文件修改，当文件被修改了就重启任务
  gulp.watch(paths.html.src, html)
  gulp.watch(paths.css.src, css)
  gulp.watch(paths.js.src, js)
}


// 把gulpfile.js作为一个自定义模块将任务导出
// 这种写法单个导出，也只能单个执行
// module.exports = {
//   delDist,
//   html,
//   css,
//   js,
//   img,
//   libs
// }

// default任务：默认任务
// gulp.series() 连续：同步，参数可以传入gulp任务，这些任务同步执行
// gulp.parallel()  平行：异步，参数可以传入gulp任务，这些任务异步执行
module.exports.default = gulp.series(delDist, gulp.parallel(html, js, css, img, libs, server, watch))
